<template>
  <section class="component repayment-query" ref="repayment-query">
    <div class="request-btn">
      <el-button type="text" icon="el-icon-refresh" @click="refreshData">请求最新数据</el-button>
    </div>
    <data-box :data="tableData" @onPageChange="refreshData" :page="pageService" :selectionList="false" :hiddenIndex="true">
      <template slot="columns">
        <el-table-column prop="applyNo" label="还款申请号" show-overflow-tooltip />
        <el-table-column prop="repayStatus" label="还款状态" show-overflow-tooltip />
        <el-table-column prop="repayTotalAmt" label="还款总金额" show-overflow-tooltip />
        <el-table-column prop="repayType" label="还款类型" show-overflow-tooltip />
        <el-table-column prop="repayApplyTime" label="还款申请时间" show-overflow-tooltip />
        <el-table-column prop="repayFinishTime" label="还款完成时间" show-overflow-tooltip />
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button @click="emitClose">关闭</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import { namespace } from "vuex-class";
import { Vue, Component, Emit, Prop, Watch } from "vue-property-decorator";
import { PageService } from "~/utils/page.service";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { Dependencies } from "~/core/decorator";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {}
})
export default class RepaymentQuery extends Vue {
  @CollectionExecutionModule.State private caseNo;
  @CollectionExecutionModule.State private caseId;
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(CaseOperatorPageService) private CaseOperatorPageService: CaseOperatorPageService;
  @Prop() private caseNumber
  private OrderNum: number = 0
  @Prop() private repaymentQueryDialog
  private tableData: any = []
  @Emit("close") private emitClose () { }


  private mounted () {
    this.refreshData();
  }

  @Watch("repaymentQueryDialog", { immediate: true }) private openDialog (val) {
    if (val) {
      this.refreshData();
    }
  }

  private refreshData () {
    // this.$emit("onClickCaseNumer")
    const query = {
      caseNumber: this.caseNumber
    }
    this.CaseOperatorPageService
        .queryCarLoanOrderInfo(this.caseId)
        .subscribe((data) => {
          this.OrderNum = data["totalSize"]
          if(this.OrderNum === 0){
            this.CaseOperatorPageService.queryRepayRecords(query, this.pageService).subscribe(data => {
              console.log('data', data);
              this.tableData = data.repayRecords
              this.pageService.total = data.totalSize
            })
          } else {
            this.CaseOperatorPageService.queryRepayRecordsCarLoan(query, this.pageService).subscribe(data => {
              console.log('data', data);
              this.tableData = data.repayRecords
              this.pageService.total = data.totalSize
            })
          }
    })
    
  }

}
</script>
<style lang="less" scoped>
.repayment-query {
  .request-btn {
    text-align: right;
  }
}
</style>
